import React, { Component, createRef } from 'react'
import PropTypes from 'prop-types'
// 1. 下载安装prop-types
// 2. 导入的PropTypes 有类型
export default class Hello extends Component {
  // 类组件提供类型校验 默认值的一种优化方式
  // class语法中 static 用来标识属性是类本身的, 区别于实例属性
  // 类本身的属性 => 静态属性
  static propTypes = {
    num1: PropTypes.string,
    num2: PropTypes.number,
    count: PropTypes.number,
    msg: PropTypes.string,
  }
  static defaultProps = {
    msg: 'hello',
    count: 20,
  }

  // constructor执行结束后, 数据初始化完毕
  constructor(props) {
    // 1. 初始化state 2. 创建ref 3. 网络请求
    console.log('constructor钩子执行了=====>>>>>')
    super()

    this.state = {
      xx: 'hh',
    }

    this.xxRef = createRef()
  }
  componentDidMount() {
    // 1. 获取DOM 2. 网络请求(最佳实践)(用的最多最多的)
    console.log('componentDidMount钩子执行了===>>>')
  }
  componentDidUpdate() {
    // 1. 获取更新后的DOM
    // 不能直接调用setState
    console.log('componentDidUpdate钩子执行了===>>>')
  }
  componentWillUnmount() {
    // 组件卸载触发, 一般用于清楚定时器, 移除全局事件
    console.log('componentWillUnmount钩子执行了===>>>')
  }

  // 为组件实例提供状态 this.state
  render() {
    // 如果在render发请请求, 只要数据改变就会发送请求, 重新渲染浪费性能
    console.log('render钩子执行了===>>>')
    return (
      <div>
        <h1>Hello</h1>
        <p>{this.props.count}</p>
        <p>{this.props.msg}</p>
        <p>两数之和:{this.props.num1 + this.props.num2}</p>
      </div>
    )
  }
}

// 3. 类.propTypes = {...}
// Hello.propTypes = {
//   num1: PropTypes.string,
//   num2: PropTypes.number,
//   count: PropTypes.number,
//   msg: PropTypes.string,
// }

// 4. 给组件props设置默认值 , 组件名.
// Hello.defaultProps = {
//   msg: 'hello',
//   count: 20,
// }
